<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620"></head>
<body >
<style type="text/css">

ul { margin:0; padding:0px 0px 0px 0px; list-style:none; width:280px}
li {border-bottom:1px #FFFFFF dashed;padding:0px 0px 10px 0px;background-color: #FFFFFF; color:#666;}
li:hover { 
  background-color: #666;
  color:#FFFFFF;
} 
</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&language=<?php echo $_GET[lang]; ?>&key=ABQIAAAA2q9bL_JatI-Wfq9QGqzHixRTdSdWc6NP76mdRkW-d5uiGbCpHhSHXNgpgCT9nOr4ojzHVb6DXtn7cg" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var cm_map;
var cm_openInfowindow;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];
var entryArray = [];
// Config 
	//Default LatLng
	var defaultLat =13.063175;
	var defaultLng =100.893116;
	//Default ZOOM Map
	var zoom = 14;
	//Marker Point[Lat,Lng,title,into(html)]
<?php
if($_GET[lang]=="en"){
	$map_csv="map_en.csv";
}else{
	$map_csv="map_th.csv";
}
$objCSV = fopen($map_csv, "r");
while (($objArr = fgetcsv($objCSV, 1000, ",")) !== FALSE) {
	$maps_array[]=$objArr;
	
}
fclose($objCSV);
$order = array("\r\n", "\n", "\r");
$replace = '<br />';

$i=0;
foreach ($maps_array as $value) {
	
	$title = str_replace($order, $replace,$value[2]);
	$into = str_replace($order, $replace,$value[3].$value[4]);
							
	echo "entryArray[".$i."]=[".$value[0].",".$value[1].",". //Lat,Lng
			"'".$title."',".//title
			"'".$into."'];";//into(html)
	$i++;
}
?>

function list_item(arr,id){
	list =  '<ul>';
	for(var i=0; i<arr.length; i++) {
		list+= '<li onMouseOver="cm_markerClicked('+i+');">'; 
		list+= '<strong>'+arr[i][2]+'</strong>';
		list+= arr[i][3];
		list+= '</li>';
		
	}
	list+=  '</ul>';
	document.getElementById(id).innerHTML=list;
}
 


	function initialize() {
		var cm_map = new GMap2(document.getElementById("cm_map")); 
		var center = new GLatLng(defaultLat,defaultLng); 
		cm_map.setCenter(center, zoom); 
		cm_map.setUIToDefault(); 

		for (var i = 0; i < entryArray.length; i++) {
			var entry = entryArray[i];
			var title = entry[2];
			var html = '<strong>'+entry[2]+'</strong>'+ entry[3];
			
			var lat = eval(entry[0]);
			var lng = eval(entry[1]);
			point = new GLatLng(lat,lng);
			
			var marker = cm_createMarker(cm_map,point,title,html);
			cm_mapMarkers.push(marker);
			cm_mapHTMLS.push(html);
		}
  }

	function cm_createMarker(map,point,title,html){
		var marker = new GMarker(point);  
		  GEvent.addListener(marker, "click", function() {   
			  	marker.openInfoWindowHtml(html);   
			 }); 	
		  GEvent.addListener(marker, "clickable_changed", function() {   
			  	marker.close();   
			 });	 	    	
		map.addOverlay(marker);
		return marker;
	}
 
  /**
   * Function called when marker on the map is clicked.
   * Opens an info window (bubble) above the marker.
   * @param {Number} markerNum Number of marker in global array
   */
  function cm_markerClicked(markerNum) {
	  var infowindow = cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);  
	  cm_setInfowindow(infowindow);
  }
   
   function cm_setInfowindow(newInfowindow) {
     if (cm_openInfowindow != undefined) {
       cm_openInfowindow.close();
     }
    
     cm_openInfowindow = newInfowindow;
   }
 //]]>

</script>
  <table border="0" cellspacing="0" cellpadding="0" style="font-size:12px;">
    <tr>
      <td width="300" align="left" valign="top" >
      <div class="curvetop"></div>
          <div id="list_item" style="width : 300px; height : 500px; overflow : auto;  " ></div>
        <div class="curvebottom"></div>
      </td>
      <td width="600" height="500" valign="top"><div id="cm_map" style="width:600px; height:500px" ></div></td>
    </tr>
  </table>
<script type="text/javascript">initialize();list_item(entryArray,'list_item');</script>
</body>
</html>